<template>
    <div class='leftTop'>
        <div class="leftTop1 flex space-between"
             v-if="leftTopData1.length">
            <div class="item flex space-between">
                <span class="name">{{leftTopData1[0].name}}</span>
                <span class="value">{{leftTopData1[0].value}}</span>
            </div>
            <div class="item flex space-between">
                <span class="name">{{leftTopData1[1].name}}</span>
                <span class="value">{{leftTopData1[1].value}}</span>
            </div>
            <div class="item flex space-between">
                <span class="name">{{leftTopData1[2].name}}</span>
                <span class="value">{{leftTopData1[2].value}}</span>
            </div>
        </div>
        <box width="704px"
             height="335px"
             left="0px"
             top="58px"
             title="渠道分布"
             class="leftTop2">
            <div class="list flex space-between"
                 v-if="leftTopData2.length">
                <div v-for="item in 8"
                     :key="`item${item}`"
                     class="item "
                     :style="{background:'url('+require(`@/assets/img/storeData/lefttop-2-${item}.png`)+')'}">
                    <p class="name">{{leftTopData2[item-1].name}}</p>
                    <p class="value">{{leftTopData2[item-1].value}}</p>
                </div>
            </div>
        </box>
    </div>
</template>

<script>
export default {
    props: {
        leftTopData1: {},
        leftTopData2: {},
    },
    components: {},
    data() {
        return {}
    },
    computed: {},
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.leftTop {
    position: absolute;
    width: 704px;
    height: 393px;
    left: 58px;
    top: 191px;
    .leftTop1 {
        .item {
            padding: 0 12px 0 50px;
            width: 228px;
            height: 40px;
            &:nth-of-type(1) {
                background-image: url(../../../assets/img/storeData/lefttop-1-1.png);
            }
            &:nth-of-type(2) {
                background-image: url(../../../assets/img/storeData/lefttop-1-2.png);
            }
            &:nth-of-type(3) {
                background-image: url(../../../assets/img/storeData/lefttop-1-3.png);
            }
            .name {
                font-size: 12px;
                color: #aacef2;
            }
            .value {
                font-size: 14px;
                color: #33bbff;
            }
        }
    }
    .leftTop2 {
        .list {
            width: 100%;
            height: 100%;
            padding: 0px 16px 10px;
            .item {
                width: 154px;
                height: 130px;
                text-align: center;
                padding-top: 80px;
                .name {
                    font-size: 14px;
                    color: #fff;
                }
                .value {
                    font-size: 20px;
                    color: #00bfff;
                    margin-top: 6px;
                }
            }
        }
    }
}
</style>